{% extends "jarvis/base.html" %}

{% block content %}
<script type="text/javascript">
  function removeDevice(area_name, device_name)
  {
  $.ajax({
        url: '/jarvis/areas/'+area_name+'/'+device_name+'/remove'
    });
  }
</script>

{% if entries %}
<ul data-role="listview">
  {% for area in entries %}
     {% if area.1|length > 0 %}
     <li data-role="list-divider">{{area.0}}</li>
  
       {% for device in area.1 %}
       <li area="{{area.0}}" device="{{device.device_name}}"><a href="/jarvis/areas/{{area.0}}/{{device.device_name}}">{{device.device_name}}</a>
       <a class="remove" data-mini="true" data-icon="delete" ></a>
       </li>
       {% endfor %}
     {% endif %}
  {% endfor %}
</ul>
{% endif %}

<script type="text/javascript">
$("a.remove").bind("click", function(event, ui){
    parent = $(this).parents("li");
    device = parent.attr("device");
    area = parent.attr("area");
    removeDevice(area, device);
    parent.remove();
});
</script>

{% endblock%}
